let path = require('path');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const html = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TerserWebpackPlugin  = require('terser-webpack-plugin');
module.exports = {
  
    mode:'development',
    entry:{
        index:'./src/index.js',
        other:'./src/other.js'
    },
    output:{
        //出口根据文件名自动生成
        filename:'[name].[hash:4].js',
        path:path.resolve(__dirname,'dist')
    },
    optimization:{
        minimize: true,
        minimizer:[ 
              //一般在生产环境才会生效压缩css
            new OptimizeCssAssetsPlugin(),
            new TerserWebpackPlugin()
        ]
    },
    plugins:[
        //删除之前hash生成的文件
        new CleanWebpackPlugin(),
        //打包html页面的插件
        new html({
            template:'./public/index.html',
            filename:'index.html',
            title:'包装袋的',
            chunks:['index']
        }),
        //多入口的html
        new html({
            template:'./public/other.html',
            filename:'other.html',
            title:'sddwww',
            //让html指定引入文件
            chunks:['other']//['other','index']
        }),
        //为每个含有css的js文件生成单独的css文件
        new MiniCssExtractPlugin({
            filename:'[name].[hash:4].css',
            chunkFilename: '[id].css',
        }),
    ],
    module:{
        rules:[
            {
                test:/\.css$/,
                use:[ 
                    {loader: MiniCssExtractPlugin.loader,
                    options: {
                      esModule: true,
                    },
            },'css-loader']
            },
            {
                test:/\.less$/,
                use:[
                    {loader: MiniCssExtractPlugin.loader,
                        options: {
                          esModule: true,
                        }
                    },'css-loader','postcss-loader','less-loader']
                    //在加载css之前使用postcss做一个兼容处理一般搭配Autoprefixer加前缀
            },{
                test: /\.(png|jpg|gif)$/i,
                use: [
                  {
                    loader: 'url-loader',
                    options: {
                        name:'./img/[name].[ext]',
                        //在这个大小范围内，都转成base64，减少http请求
                        //超过了则使用file-loader
                      limit: 10*1024,
                    },
                  },
                ],
              },
        ]
    }
}